<template>
  <div class="text-rate">
    <el-radio-group v-model="valueSelf" @change="changeStatus">
      <el-radio v-for="item in texts" :label="item.value" :key="item.value">
        <i class="face-icon">{{ item.icon }}</i>
        {{ item.label }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'TextRate',
  components: {},
  model: {
    prop: 'value',
    event: 'changeValue',
  },
  props: {
    texts: {
      type: Array,
      default: () => [
        {
          label: '满意',
          value: 0,
          icon: '😊',
        },
        {
          label: '基本满意',
          value: 1,
          icon: '😐',
        },
        {
          label: '不满意',
          value: 2,
          icon: '😟',
        },
      ],
    },
    value: {
      type: [Number, String],
    },
    size: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      valueSelf: -1,
    }
  },
  computed: {},
  watch: {
    value(val) {
      if (val !== undefined && val !== '') {
        this.valueSelf = Number(val)
      } else {
        this.valueSelf = -1
      }
    },
  },
  created() {
    if (this.value !== undefined && this.value !== '') {
      this.valueSelf = Number(this.value)
    }
  },
  mounted() {},
  methods: {
    changeStatus() {
      this.$emit('changeValue', this.valueSelf)
      this.$emit('change', this.valueSelf)
    },
  },
}
</script>
<style lang="scss" scoped>
.text-rate {
  .face-icon {
    padding-right: 4px;
    font-style: normal;
  }
  @media screen and(max-width:800px) {
    .face-icon {
      font-size: 24px;
    }
    ::v-deep .el-radio-group {
      display: flex;
      flex-direction: column;
      .el-radio__inner {
        width: 20px;
        height: 20px;
        bottom: 3px;
      }
      .el-radio {
        margin-bottom: 20px;
        .el-radio__label {
          font-size: 20px;
        }
      }
    }
  }
}
</style>
